<template>
	<view class="warp">
		<view class="checkbox fillet">
			<view class="check_item">
				<view class="tit">姓名</view>
				<view class="check_content">
					<input class="lit" type="text" v-model="form.TrueName" placeholder="请输入您的姓名" />
				</view>
			</view>
			<view class="check_item" @click="sexShow = true">
				<view class="tit">性别</view>
				<view class="check_content">
					<view class="lit">{{ sexText }}</view>
					<uni-icons size="16" color="#fff" type="right"></uni-icons>
				</view>
			</view>
			<view class="check_item">
				<view class="tit">联系电话</view>
				<view class="check_content">
					<input class="lit" type="tel" v-model="form.Mobile" placeholder="请输入您的联系电话" />
				</view>
			</view>
			<!-- <view class="check_item">
				<view class="tit">身份证号</view>
				<view class="check_content">
					<input class="lit" type="text" v-model="form.CertID" placeholder="请输入您的身份证号" />
				</view>
			</view> -->
			<view class="check_item">
				<view class="tit">衣服尺码</view>
				<view class="check_content">
					<picker @change="chooseDress" :value="dressIndex" :range="dressList">
						<view class="uni-input">{{form.ClothSize || '请选择尺码'}}</view>
					</picker>
					<!-- <input class="lit" type="text" v-model="form.ClothSize" placeholder="请输入您的衣服尺码" /> -->
				</view>
			</view>
			<!-- <view class="check_item">
				<view class="tit">差点</view>
				<view class="check_content">
					<input class="lit" type="text" v-model="form.GolfLevel" placeholder="请输入差点" />
				</view>
			</view> -->
			<view class="check_item">
				<view class="tit">报名费用</view>
				<view class="check_content">
					<input class="lit" type="text" v-model="price" placeholder="请先选择性别" disabled />
				</view>
			</view>
		</view>
		<view class="tipsBox">
			<view class="tipsText" @click="openImage">查看衣服尺码表</view>
		</view>
		<u-action-sheet :actions="sexColumns" :show="sexShow" :safeAreaInsetBottom="true" :closeOnClickAction="true"
			:closeOnClickOverlay="true" @select="sexClick"></u-action-sheet>
		<view class="btn_box" @click="actionSign">
			<view class="go_btn">提交</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			sexShow: false,
			sexColumns: [
				{ name: '男', value: 1 },
				{ name: '女', value: 0 },
			],
			sexText: '男',
			actionInfo: {},
			form: {
				CertID: '',//   身份证
				ClothSize: '',//  服装尺码
				Mobile: uni.getStorageSync('user').Phone || '',//   联系方式
				Sex: '',//  性别
				TrueName: '',//姓名
				GolfLevel: '', //差点
			},
			dressIndex:0,
			ID: '',
			party: {},
		};
	},
	computed: {
		price() {
			let manPrice = this.party?.RegisterFee || 0
			let womanPrice = this.party.RegisterFee2 > 0 ? this.party.RegisterFee2 : this.party.RegisterFee
			if (this.party.IsFee == 0) {
				return '免费'
			} else {
				return this.sexText == '男' ? manPrice : womanPrice
			}

		},
		dressList(){
			let manList = ['S','M','L','XL','XXL','3XL']
			let womanList = ['XS','S','M','L','XL','2XL']
			return this.sexText == '男'?manList:womanList
		},
	},
	onLoad(e) {
		this.ID = e.id
		this.Get_Detail()
	},
	methods: {
		// 选择衣服尺码
		chooseDress(e){
			this.form.ClothSize = this.dressList[e.detail.value]
		},
		// 查看尺码表
		openImage(){
			uni.previewImage({
			urls: ['https://golfdate.oss-cn-shenzhen.aliyuncs.com/img/golf_cloth_size.jpg'],
		});
		},
		sexClick(e) {
			if (e.name != this.sexText) {
				this.dressIndex = 0
				this.form.ClothSize = ''
			}
			this.sexText = e.name
			this.sexShow = false
		},
		async Get_Detail() {
			let res = await this.$api.post("/Action/GetActionDetail", {
				ID: this.ID,
			});
			const { code, data, msg } = res
			if (code == 0) {
				this.party = res?.data;
			} else {
				this.$pv.msg('网络异常，请重试')
			}

		},
		async actionSign() {
			if (!this.form.TrueName) {
				this.$pv.msg('请输入姓名')
				return
			}

			if (!this.form.Mobile) {
				this.$pv.msg('请输入联系电话')
				return
			}
			// if (!this.form.CertID) {
			// 	this.$pv.msg('请输入身份证号码')
			// 	return
			// }
			if (!this.form.ClothSize) {
				this.$pv.msg('请输入衣服尺码')
				return
			}
			// if (!this.form.GolfLevel) {
			// 	this.$pv.msg('请输入差点')
			// 	return
			// }
			if (this.sexText == '男') {
				this.form.Sex = 1
			} else {
				this.form.Sex = 0
			}
			const isOnLine = this.party.PayType == '线上支付'? true : false
			if (this.price > 0 && this.party.IsFee != 0 && isOnLine) {
				//需要支付费用
				const EventType = this.party.ActType == '赛事'? '比赛报名':'活动报名'
				// 支付请求
				let pres = await this.$api.post("Payment/PayV2", {
					total_fee: this.price,
					EventType: EventType,
					EventID: this.party.ID,
					body: this.party.Title,
					// #ifdef MP-WEIXIN
					PayChannel: "weixin",
					// #endif
					// #ifdef APP
					PayChannel: "app",
					// #endif
				});
				// 已余额支付成功
				if (pres.data == 0) {
					this.$pv.msg("余额支付成功");
					this.signUp()
				} else {
					// 支付成功返回的内容
					let payObj = JSON.parse(pres.data);
					let _this = this;
					// 调用uni支付API
					uni.requestPayment({
						// 服务提供商
						provider: "wxpay",
						// #ifdef APP
						orderInfo: payObj,
						// #endif
						// #ifdef MP-WEIXIN
						timeStamp: payObj.timeStamp,
						nonceStr: payObj.nonceStr,
						package: payObj.package,
						signType: payObj.signType,
						paySign: payObj.paySign,
						// #endif
						success(res) {
							_this.signUp()
						},
						fail(err) {
							_this.$pv.msg("支付失败");
						},
					});
				}
			} else {
				this.signUp()
			}

		},
		async signUp() {
			await this.$api.post('/Action/ActionSign', {
				ID: this.ID,
				...this.form
			}).then((res) => {
				if (res.data == true) {
					this.$pv.msg('报名成功')
				} else {
					this.$pv.msg('您已报过名')
				}
			});
			uni.$emit('update')
			setTimeout(() => {
				uni.navigateBack()
			}, 1000)

		},
	},
};
</script>

<style lang="scss">
.gary {
	color: #979797 !important;
}

.fillet {
	border-radius: 16rpx;
	background-color: #202020;
	box-sizing: border-box;
}

.warp {
	padding: 26rpx;

	.textbox {
		padding: 26rpx 32rpx;

		input {
			font-weight: bold;
			padding-bottom: 20rpx;
			border-bottom: 2rpx solid #404040;
		}

		textarea {
			width: 100%;
			margin-top: 20rpx;
			font-size: 26rpx;
			line-height: 1.6;
		}
	}

	.checkbox {
		margin-top: 30rpx;
		padding: 0 32rpx;

		.check_item {
			border-bottom: 2rpx solid #404040;
			display: flex;
			align-items: center;
			justify-content: space-between;

			view {
				color: #fff;
				font-size: 28rpx;
			}

			.check_content {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				padding: 26rpx 0;
				width: 70%;

				input {
					font-size: 26rpx !important;
					width: 100%;
					text-align: right;
				}

				.input-placeholder {
					font-size: 26rpx !important;
				}

				.lit {
					width: 100%;
					text-align: right;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}

		.check_item:last-child {
			border: 0;
		}
	}

	.btn_box {
		// background-color: #262626;
		position: fixed;
		width: 100%;
		box-sizing: border-box;
		bottom: 0;
		left: 0;
		padding: 20rpx 26rpx;
		padding-bottom: 40rpx;

		.go_btn {
			border-radius: 50rpx;
			font-size: 30rpx;
			color: #4c310c;
			padding: 20rpx 0;
			text-align: center;
			background-image: linear-gradient(to right, #fef0bc, #b98b51);
		}
	}
}
.tipsBox{
	width: 100%;
	display: flex;
	justify-content: flex-end;
	.tipsText{
		padding: 30rpx;
		color: #979797;
		font-size: 28rpx;
		text-decoration: underline;
	}
}
</style>
